<template>
	<div ref="content" class="containers">
		<div ref="canvas" class="canvas" />
		<div id="js-properties-panel" class="panel" />
	</div>
</template>

<script>
// 引入相关的依赖
// import BpmnViewer from 'bpmn-js'
import BpmnModeler from "bpmn-js/lib/Modeler";
// 原有的 properties-panel 这个框
import propertiesPanelModule from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
// import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda"; // 而这个引入的是右侧属性栏里的内容
import propertiesProviderModule from "./properties-panel-extension/provider/authority"; // 自定义的 properties-panel内容
import authorityModdleDescriptor from "./properties-panel-extension/descriptors/authority";
import magicModdleDescriptor from "./properties-panel-extension/descriptors/magic.json";
import { xmlStr } from "./mock/xmlStr";
import zhCN from "./customTranslate"; // 中文

export default {
	components: {},
	data() {
		return {
			bpmnModeler: null,
		};
	},
	// 计算属性
	computed: {},
	created() {},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.bpmnModeler = new BpmnModeler({
				container: this.$refs.canvas,
				propertiesPanel: {
					parent: "#js-properties-panel",
				},
				additionalModules: [
					propertiesPanelModule, // 右边的工具栏(固定引入)
					propertiesProviderModule, // 自定义右边工作栏的内容
					{ translate: ["value", zhCN] }, // 中文
				],
				moddleExtensions: {
					camunda: camundaModdleDescriptor,
					authority: authorityModdleDescriptor,
					magic: magicModdleDescriptor,
				},
			});
			this.createNewDiagram();
		},
		createNewDiagram() {
			// 将字符串转换成图显示出来
			this.bpmnModeler.importXML(xmlStr, err => {
				if (err) {
					// console.error(err)
				} else {
					// 这里是成功之后的回调, 可以在这里做一系列事情
					this.success();
					this.bpmnEvent();
				}
			});
		},
		// 注册节点事件，可以写多个事件
		bpmnEvent() {
			const eventBus = this.bpmnModeler.get("eventBus");
			eventBus.on(["element.click", "element.changed"], e => {
				const { element, type } = e;
				// console.log(eventType, element);
				if (!e || !element || !element.parent || element.type === "bpmn:Process") return; // 这里我的根元素是bpmn:Process
				if (type === "element.click") {
					console.log(element);
					// this.changeColor(element)
					// this.overlays(element)
					// this.changeAttrs(element)
				} else if (type === "element.hover") {
					// 鼠标滑过节点后想要做的处理
					// console.log("鼠标经过节点啦~");
				} else if (type === "element.changed") {
					console.log("元素改变触发");
				}
			});
		},
		success() {
			// 给图绑定事件，当图有发生改变就会触发这个事件
			const that = this;
			this.bpmnModeler.on("commandStack.changed", function () {
				that.saveDiagram(function (err, xml) {
					console.log(xml);
				});
			});
		},
		// 下载为bpmn格式,done是个函数，调用的时候传入的
		saveDiagram(done) {
			// 把传入的done再传给bpmn原型的saveXML函数调用
			this.bpmnModeler.saveXML({ format: true }, function (err, xml) {
				done(err, xml);
			});
		},
	},
};
</script>

<style scoped>
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
/*右边工具栏样式*/
@import "~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
@import "./custom/index.scss";
.containers {
	background-color: #ffffff;
	width: 100%;
	height: calc(100vh - 52px);
}
.canvas {
	width: 100%;
	height: 100%;
}
.panel {
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
	height: 100%;
}
</style>
